<template>
  <div>
    <button @click="increment">+</button>
    {{ count }}
    <button @click="decrement"></button>
    <blog />
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import lodash from "lodash";
import Blog from "@/components/blog/Blog.vue";
@Options({
  compnents: { Blog },
})
export default class TimerCount extends Vue {
  count: number = 0;
  // Methods will be component methods

  increment = lodash.debounce(() => {
    this.count++;
  }, 200);
  decrement = lodash.debounce(() => {
    this.count--;
  }, 200);
  mounted() {}
  created() {
    // 使用 Lodash 实现防抖
  }
  unmounted() {
    // 移除组件时，取消定时器
    this.increment.cancel();
    this.decrement.cancel();
  }
}
</script>
<style lang="scss" scoped>
</style>